<template>
    <div style='padding: 20px 0;'>
        <div class="OrderListInfo" v-loading='pageLoading'>
            <div class="title">订单详情</div>
            <div class="info">
                <div class="info-table">
                    <p>学生基本信息</p>
                    <table>
                        <tr>
                            <td>学生姓名</td>
                            <td>{{studentBigcOrderInfoVO.studentName}}</td>
                            <td>用户名</td>
                            <td>{{studentBigcOrderInfoVO.studentUserName}}</td>
                        </tr>
                        <tr>
                            <td>手机号</td>
                            <td>{{studentBigcOrderInfoVO.studentPhone}}</td>
                            <td>年级</td>
                            <td>{{studentBigcOrderInfoVO.studentGrade}}</td>
                        </tr>
                        <tr>
                            <td>分校编码</td>
                            <td>{{studentBigcOrderInfoVO.organizationCode}}</td>
                            <td>分校名称</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>客户来源</td>
                            <td>{{studentBigcOrderInfoVO.studentDataFrom}}</td>
                            <td>推广来源</td>
                            <td>{{studentBigcOrderInfoVO.spreadActivityDataFromStr}}</td>
                        </tr>
                    </table>
                </div>
                <div class="info-table">
                    <p>订单信息</p>
                    <table>
                        <tr>
                            <td>总订单号</td>
                            <td>
                                {{studentBigcOrderInfoVO.orderNo}}
                                <el-button
                                    v-clipboard:copy="`${studentBigcOrderInfoVO.orderNo}`"
                                    v-clipboard:success="onCopy"
                                    v-clipboard:error="onError"
                                    :size="size"
                                    class="fr"
                                >复制</el-button>
                            </td>
                            <td>子订单号</td>
                            <td>
                                {{studentBigcOrderInfoVO.orderChildNo}}
                                <el-button
                                    v-clipboard:copy="`${studentBigcOrderInfoVO.orderChildNo}`"
                                    v-clipboard:success="onCopy"
                                    v-clipboard:error="onError"
                                    :size="size"
                                    class="fr"
                                >复制</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td>订单状态</td>
                            <td>{{studentBigcOrderInfoVO.payState}}</td>
                            <td>订单来源</td>
                            <td>{{studentBigcOrderInfoVO.source}}</td>
                        </tr>
                        <tr>
                            <td>下单人</td>
                            <td>{{studentBigcOrderInfoVO.createPeople}}</td>
                            <td>下单时间</td>
                            <td>{{studentBigcOrderInfoVO.createTime}}</td>
                        </tr>
                        <tr>
                            <td>审核时间</td>
                            <td>{{studentBigcOrderInfoVO.examineTime}}</td>
                            <td>审核状态</td>
                            <td>{{studentBigcOrderInfoVO.examineState}}</td>
                        </tr>
                        <tr>
                            <td>审核人</td>
                            <td>{{studentBigcOrderInfoVO.examinePeople}}</td>
                            <td>审核意见</td>
                            <td>{{studentBigcOrderInfoVO.examinePeople}}</td> 
                        </tr>
                        <tr>
                            <td>支付方式</td>
                            <td>{{studentBigcOrderInfoVO.payMode}}</td>
                            <td>支付时间</td>
                            <td>汪汪汪汪汪汪汪汪汪汪汪汪汪汪汪汪汪汪</td>
                        </tr>
                        <tr>
                            <td >交易单号</td>
                            <td colspan="3">汪汪汪汪汪汪汪汪汪汪汪汪汪汪汪汪汪汪</td>
                        </tr>
                    </table>
                </div>
                <div class="info-commodity">
                    <p>商品信息</p>
                    <table>
                        <tr>
                            <th>订单详情</th>
                            <th>价格</th>
                        </tr>
                        <tr v-for='item in orderGoods'>
                            <td>
                                <div class="table-info" >
                                    <h1>{{item.name}}</h1>
                                    <h2>{{item.teacherName}}</h2>
                                    <!-- <h2>主讲老师：{{item.teacher}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.date}}</h2> -->
                                    <img class="invalid" src="../../assets/invalid.png" v-if=item.disabled />
                                </div>
                            </td>
                            <td>
                                <h1>¥{{item.price}}</h1>
                                <h2>¥{{item.realPrice}}</h2>
                                <div class="btns">
                                    <el-button type="text" @click="refundOrder">退单</el-button>
                                    <el-button type="text">改单</el-button>
                                </div>
                            </td>
                        </tr>
                        <!-- <tr>
                            <td colspan="2">
                                附带教材*2
                                <el-button type="text" @click="seeInfo">查看详情</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                包含课程*2
                                <el-button type="text"  @click="seeInfo">查看课程明细</el-button>
                            </td>
                        </tr> -->
                    </table>
                </div>
                <div class="settlement-box">
                    <p>结算信息</p>
                    <table>
                        <tr>
                            <td>商品总价</td>
                            <td>¥{{studentBigcOrderInfoVO.goodsPrice}}</td>
                        </tr>
                        <tr>
                            <td>运费</td>
                            <td>¥10</td>
                        </tr>
                        <tr>
                            <td>优惠</td>
                            <td>运费减免-¥10.00；优惠券-¥50；组合优惠-¥49</td>
                        </tr>
                        <tr>
                            <td>兑换</td>
                            <td>水晶¥2（2000颗）</td>
                        </tr>
                        <tr>
                            <td>实付金额</td>
                            <td>¥1097.00</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- 弹窗 -->
        <el-dialog
            title="课程"
            width="70%"
            :visible.sync="showPop"
            @close="closeAddPop">
            <Crm-table
                class="table-width"
                :showOverflowTooltip='false'
                :showOperation='false'
                width="400"
                :order='false'
                :data="pageResult"
                :columns="columns"
                :border='true'
                :loading="loading"
            ></Crm-table>
        </el-dialog>
        <!-- 退单 -->
        <div v-if='refundOrderShow'>
            <Refund-Order v-if='refundOrderShow' :refundOrderShow='refundOrderShow' :refundOrderData='refundOrderData' @closeRefundOrder='closeRefundOrder'></Refund-Order>
        </div>
        <div class="foot-btns" v-if='pageType==2'>
            <el-button :size="size" @click="closeSelectedTag">关闭</el-button>
            <el-button :size="size" @click="examineNone">审核不通过</el-button>
            <el-button :size="size" type="primary" @click="examinePass">审核通过</el-button>
        </div> 
        <!-- 驳回 -->
        <el-dialog
            title="请输入驳回理由"
            :visible.sync="examineNoneShow"
            width="40%">
            <el-input
                type="textarea"
                :rows="5"
                placeholder="请输入内容"
                v-model="auditRemark">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button  :size="size"  @click="examineNoneShow = false">取 消</el-button>
                <el-button :size="size"  type="primary" @click="examineNoneSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import CrmTable from "@/views/Core/CrmTable";
import RefundOrder from "@/views/OrderInfoMange/RefundOrder";

export default {
    name: "OrderListInfo",
    components: {
        CrmTable,
        RefundOrder
    },
    data() {
        return {
            studentBigcOrderInfoVO:'',
            orderGoods:'',
            size: "small",
            classPopInfo:{
                title:'附带教材'
            },
            showPop:false,
            pageResult: {
                content: []
            },
            columns:[
                { type: "index", label: "序号", minWidth: 50 },
                { prop: "name", label: "教辅名称", minWidth: 50 },
                { prop: "price", label: "价格", minWidth: 50 },
            ],
            jiaocai:[
                {
                    id:1,
                    name:'高中寒假礼盒',
                    price:10
                },
                {
                    id:2,
                    name:'高二语文寒假班讲义',
                    price:20
                }
            ],
            kecheng:[
                {
                    id:1,
                    name:'【春季强化16讲】初一语文(火箭班)同步直播培优班',
                    calssTime:'100课时'
                },
                {
                    id:2,
                    name:'【寒假16讲】初一语文(火箭班)同步直播培优班',
                    calssTime:'20课时'
                }
            ],
            loading:false,
            orderInfo:[
                {
                    id:'1',
                    className:'【春季强化16讲】初一语文(火箭班)同步直播培优班',
                    name:'1对1·初中七年级·语文·VIP·160课时',
                    teacher:'VIP',
                    date:'2月22日-6月20日·16:00-18:00',
                    disabled:false,
                    realPrice:1598.00,
                    price:1198.00
                }, {
                    id:'1',
                    className:'【春季强化16讲】初一语文(火箭班)同步直播培优班',
                    name:'1对1·初中七年级·语文·VIP·160课时',
                    teacher:'VIP',
                    date:'2月22日-6月20日·16:00-18:00',
                    disabled:true,
                    realPrice:1598.00,
                    price:1198.00
                }
            ],
            refundOrderShow:false,
            pageLoading:false,
            examineNoneShow:false,
            refundOrderData:[],
            pageType:this.$route.query.type,
            auditRemark:'',
            studentTGsourceOptions:JSON.parse(localStorage.getItem("studentTGsource"))
        };
    },
    created() {},
    mounted() {
        this.getPageData()
    },
    methods: {
        // 获取页面数据
        getPageData(){
            this.pageLoading=true
            this.$api.student
            .queryOrderDetailInfo({
                goodsType:this.$route.query.goodsType?this.$route.query.goodsType:'',
                sno:this.$route.query.sno
            })
            .then(res => {
                if (res.result == 2) {
                    this.$message({ message: res.msg, type: 'error' });
                } else {
                    
                    this.orderGoods=res.data.orderGoods
                    this.studentBigcOrderInfoVO=res.data.studentBigcOrderInfoVO
                    this.studentTGsourceOptions.forEach(item=>{
                        if(this.studentBigcOrderInfoVO.spreadActivityDataFrom==item.key){
                            this.studentBigcOrderInfoVO.spreadActivityDataFromStr=item.value
                        }
                    })
                    this.pageLoading=false
                }
            });
        },
        onCopy(params) {
            this.$message({
                message: "复制成功" + params.text,
                type: "success"
            });
        },
        onError(params) {
            this.$message({
                message: "复制失败",
                type: "error"
            });
        },
        seeInfo(params){
            this.showPop=!this.showPop
            let content = {
                content: this.jiaocai,
                };
            this.pageResult=content
        },
        refundOrder(){
            this.refundOrderData=({orderGoods:this.orderGoods[0],studentBigcOrderInfoVO:this.studentBigcOrderInfoVO})
            this.refundOrderShow=true
        },
        closeRefundOrder(){
            this.refundOrderShow=false
        },
        isActive(route) {
            return route.path === this.$route.path;
        },
        closeSelectedTag(view) {
            this.$store.dispatch("delVisitedViews", this.$route).then(views => {
                if (this.isActive(this.$route)) {
                    const latestView = views.slice(-1)[0];
                    if (latestView) {
                        this.$router.push(latestView);
                    } else {
                        this.$router.push("/");
                    }
                }
            });
        },
        examineNone(){
            this.examineNoneShow=true
        },
        examineNoneSubmit(){
            this.$api.student
                    .auditOrder({
                        auditState: 2,//1通过 2驳回
                        sno:this.studentBigcOrderInfoVO.orderNo,
                        auditRemark:this.auditRemark
                    })
                    .then(res => {
                        if (res.result == 2) {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "success"
                            });
                            this.examineNoneShow=false
                        }
                    });
        },
        examinePass(){
            this.$confirm(
                "确认要通过审核吗？",
                "提示",
                {}
            ).then(() => {
                // this.editLoading = true;
                this.$api.student
                    .auditOrder({
                        auditState: 1,//1通过 2驳回
                        sno:this.studentBigcOrderInfoVO.orderNo,
                    })
                    .then(res => {
                        if (res.result == 2) {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "success"
                            });
                        }
                    });
            });
        }
    }
};
</script>

<style  lang="scss">
.OrderListInfo {
    margin-left: 50px !important;
    .title {
        text-align: left;
        font-size: 20px;
        color: red;

        &::after {
            content: "";
            display: block;
            width: 150px;
            height: 1px;
            background: red;
            margin-top: 10px;
        }
    }
    .info-table {
        p {
            text-align: left;
            font-size: 14px;
            margin: 30px 0 10px 0;
        }
        table {
            border: 1px solid #dddddd;
            border-collapse: collapse;
            text-align: left;
            tr {
                td {
                    border: 1px solid #dddddd;
                    padding: 10px 20px 10px 20px;
                    &:nth-child(2),
                    &:nth-child(4) {
                        width: 400px;
                    }
                }
            }
        }
    }
    .info-commodity {
        p {
            text-align: left;
            font-size: 14px;
            margin: 30px 0 10px 0;
        }
        table {
            border: 1px solid #dddddd;
            border-collapse: collapse;
            text-align: center;
            tr {
                td,
                th {
                    width: 108px;
                    border: 1px solid #dddddd;
                    padding: 10px 20px 10px 20px;
                    text-align: center;
                    &:nth-child(1) {
                        width: 900px;
                        text-align: left;
                    }
                }
                th {
                    background: #ccc;
                }
                td {
                    .table-info {
                        position: relative;
                        h1 {
                            font-size: 16px;
                            margin-bottom: 10px;
                        }
                        h2 {
                            font-size: 14px;
                            margin-bottom: 10px;
                        }
                        .invalid {
                            width: 66px;
                            position: absolute;
                            right: 60px;
                            top: 0px;
                        }
                    }
                }
            }
        }
    }
    .settlement-box {
        p {
            text-align: left;
            font-size: 14px;
            margin: 30px 0 10px 0;
        }
        table {
            border: 1px solid #dddddd;
            border-collapse: collapse;
            text-align: left;
            tr {
                td {
                    border: 1px solid #dddddd;
                    padding: 10px 20px 10px 20px;
                    &:nth-child(2) {
                        width: 950px;
                    }
                }
            }
        }
    }
}
.foot-btns{
    padding-top:20px
}
</style>
